<template>
  <div id="xmbz_index">
    <!-- 第一列轮播 -->
    <div class="swiper_first">
      <el-carousel
        arrow="never"
        height="100%"
        :autoplay="true"
        :pause-on-hover="false"
        :interval="4000"
        @change="firstSwiperSwitch"
      >
        <el-carousel-item v-for="(item, index) in firstWipers" :key="index">
        <a :href="item.target" target="_blank" class="inline-block w-full h-full">
          <img :src="item.src" :title="item.title" />
        </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 引导箭头 -->
    <div class="arrow_down" :class="!showArrow ? 'hide_arrow' : ''"></div>

    <!-- 第二列轮播 -->
    <div class="swiper_second">
      <ul class="second_top">
        <li class="swiper_arrow" @click="changeCurr('add')">
          <div class="arrow_box">
            <a href="javascript:void(0)"
              ><img src="@/assets/images/arrow_left.png"
            /></a>
          </div>
        </li>
        <li class="second_swiper_li">
          <el-carousel
            arrow="never"
            height="722px"
            :autoplay="true"
            :pause-on-hover="false"
            indicator-position="none"
            ref="myCarousel"
          >
            <el-carousel-item
              v-for="(item, index) in secondWipers"
              :key="index"
              name="index"
            >
              <a :href="item.target" target="_blank">
                <img :src="item.src" :title="item.title" class="swiper_chart" />
              </a>
              <h3>{{ item.alt }}</h3>
              <div class="shape">爆款推荐</div>
            </el-carousel-item>
          </el-carousel>
        </li>
        <li class="swiper_arrow" @click="changeCurr('reduce')">
          <div class="arrow_box">
            <a href="javascript:void(0)"
              ><img src="@/assets/images/arrow_right.png"
            /></a>
          </div>
        </li>
      </ul>
      <div class="second_bottom">
        <div class="get_more" @click="getMoreCakes">查看更多</div>
      </div>
    </div>

    <!-- 我们提供的服务 -->
    <section class="service_video flex-col-c-c">
      <div class="reuse_top flex-col-c-c">
        <h2 class="h2_title">我们提供的服务</h2>
        <h4 class="h4_title">Our Service</h4>
        <p class="desc_p">小熊猫上门跳舞，让你的家人生日更快乐</p>
      </div>
      <!-- 视频 -->
      <video
        src="@/assets/videos/index_video.mp4"
        class="xmbz_video"
        muted
        controls
        width="1220"
        :autoplay="playVideo"
        height="666"
        loop
        controlslist="nodownload nofullscreen"
        id="video"
      ></video>
    </section>

    <img style="margin: auto; display: none;" src="@/assets/images/panda_logo.png" alt="熊猫不走官网" title="熊猫不走官网">

    <!-- 精选食材 -->
    <section class="ingredients flex-col-c-c">
      <div class="reuse_top flex-col-c-c">
        <h2 class="h2_title">精选食材</h2>
        <h4 class="h4_title">Selected Ingredients</h4>
      </div>
      <ul class="foodstuff_list flex-row-sb-c">
        <li v-for="item in ingredientList" :key="item.src">
          <a href="https://j.youzan.com/4-z5P7" target="_blank">
            <img :src="item.src" :title="item.desc" />
            <div class="pic_info flex-col-c-c">
              <h4>{{ item.title }}</h4>
              <p>{{ item.desc }}</p>
            </div>
          </a>
        </li>
      </ul>
    </section>

    <!-- 研发团队 -->
    <section class="dev_team flex-col-c-c">
      <div class="reuse_top flex-col-c-c">
        <h2 class="h2_title">研发团队</h2>
        <h4 class="h4_title">R & D Team</h4>
      </div>
      <div class="team_pic flex-row-c">
        <img
          class="chef_pic"
          src="@/assets/images/chef.png"
          alt="熊猫不走厨师长"
        />
        <div class="dev_right">
          <h3 class="our_chef">我们的</h3>
          <h3 class="our_chef">五星级名厨</h3>
          <p>来自希尔顿、喜来登等五星级酒店运用专业的糕点工艺和匠心精神，</p>
          <p>让每款蛋糕好吃又好看。</p>
        </div>
      </div>
    </section>

    <!-- 合作客户 -->
    <section class="shared_customer flex-col-c-c">
      <div class="reuse_top flex-col-c-c">
        <h2 class="h2_title">合作客户</h2>
        <h4 class="h4_title">Partner</h4>
        <!-- <p class="desc_p">
          我们非常重视与合作伙伴的关系，我们为合作伙伴创建了优厚的回馈计划来鼓励和
        </p> -->
      </div>
      <div class="shared_bottom flex-row-sb-c">
        <div class="loop_play"></div>
      </div>
    </section>
  </div>

</template>

<script lang="ts">
import { useRouter } from 'vue-router'
import {first_swiper_1,first_swiper_2,first_swiper_3,second_swiper_1,second_swiper_2,second_swiper_3,ingredients_1,ingredients_2,ingredients_3,ingredients_4} from '@/const/image'
const observerHandle = (elements, callback, outCallback) => {
  let observer = new IntersectionObserver(entries => {
    entries.forEach((item) => {
        if (item.intersectionRatio >= 0.5) {
          callback()
        } else {
          outCallback()
        }
    });
  }, {
    threshold: [0.5], // 展现面积为50%触发
  });
  // observer.POLL_INTERVAL = 50; // 节流时间为50毫秒
  Array.from(elements).forEach((el:Element) => observer.observe(el));
}
export default {
  head() {
    return {
      meta: [{
        hid: 'keywords',
        name: 'keywords',
        content: '熊猫不走、熊猫蛋糕、熊猫不走蛋糕、生日蛋糕、蛋糕预定、熊猫跳舞、水果蛋糕、慕斯蛋糕、奶油蛋糕、芝士蛋糕、动物奶油蛋糕、私人定制'
      }]
    }
  },
  setup() {
    const loading = ref(true)
    const currentDate = new Date().toDateString()
    const router = useRouter()
    let myCarousel = ref(null)
    let hideBox = ref(false)
    const playVideo = ref(false)
    const showArrow = ref(true)
    const firstWipers = ref([
      // {
      //   src: first_swiper_1,
      //   alt: '浙江卫视《青春环游记》指定蛋糕品牌',
      //   target: 'https://j.youzan.com/4-z5P7'
      // },
      // {
      //   src: first_swiper_2,
      //   alt: '浙江卫视《青春环游记》指定蛋糕',
      //   target: 'https://j.youzan.com/T2SamT'
      // },
      {
        src: first_swiper_3,
        alt: '熊猫人免费上门跳舞',
        target: 'https://j.youzan.com/4-z5P7'
      },
    ])
    const secondWipers = ref([
      {
        src: second_swiper_1,
        alt: '四大美人-慕斯蛋糕',
        target: 'https://shop19559733.m.youzan.com/wscgoods/detail/2osuktdmjy83hs0?scan=1&activity=none&from=kdt&qr=directgoods_2831089747&shopAutoEnter=1',
      },
      {
        src: second_swiper_2,
        alt: '椰椰椰-生椰蛋糕',
        target: 'https://shop19559733.m.youzan.com/wscgoods/detail/2xe1o3aofdqwdkf?scan=1&activity=none&from=kdt&qr=directgoods_2831092246&shopAutoEnter=1',
      },
      {
        src: second_swiper_3,
        alt: '榴莲千层-动物奶油鲜果蛋糕',
        target: 'https://shop19559733.m.youzan.com/wscgoods/detail/27bdyudbg2ivx?scan=1&activity=none&from=kdt&qr=directgoods_950334230&shopAutoEnter=1',
      },
    ])
    const ingredientList = ref([
      {
        src: ingredients_1,
        title: '砂糖',
        desc: '精致幼砂糖',
      },
      {
        src: ingredients_2,
        title: '芝士',
        desc: '浓郁芝士',
      },
      {
        src: ingredients_3,
        title: '奶油',
        desc: '香醇奶油',
      },
      {
        src: ingredients_4,
        title: '巧克力',
        desc: '丝滑巧克力',
      },
    ])
    const firstSwiperSwitch = (e) => {
      const btn1 = document.getElementsByClassName(
        'el-carousel__button'
      )[0] as HTMLElement
      const btn2 = document.getElementsByClassName(
        'el-carousel__button'
      )[1] as HTMLElement
      const btn3 = document.getElementsByClassName(
        'el-carousel__button'
      )[2] as HTMLElement
      btn1.classList.remove(
        'first_swiper_not_active_0',
        'first_swiper_not_active_1',
        'first_swiper_not_active_2',
        'first_swiper_active_0'
      )
      btn2.classList.remove(
        'first_swiper_not_active_0',
        'first_swiper_not_active_1',
        'first_swiper_not_active_2',
        'first_swiper_active_1'
      )
      btn3.classList.remove(
        'first_swiper_not_active_0',
        'first_swiper_not_active_1',
        'first_swiper_not_active_2',
        'first_swiper_active_2'
      )
      if (e == 0) {
        btn1.classList.add('first_swiper_active_0')
        btn2.classList.add('first_swiper_not_active_0')
        btn3.classList.add('first_swiper_not_active_0')
      } else if (e == 1) {
        btn2.classList.add('first_swiper_active_1')
        btn1.classList.add('first_swiper_not_active_1')
        btn3.classList.add('first_swiper_not_active_1')
      } else {
        btn3.classList.add('first_swiper_active_2')
        btn1.classList.add('first_swiper_not_active_2')
        btn2.classList.add('first_swiper_not_active_2')
      }
    }
    const changeCurr = (type) => {
      if (type == 'add') {
        myCarousel.value.prev()
      } else {
        myCarousel.value.next()
      }
    }
    const handlerScroll = () => {
      // const videoDom = document.querySelector('#video') as any
      var myScrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      myScrollTop > 30 ? (showArrow.value = false) : ''
      // myScrollTop > 1500 ? (videoDom.play()) : ''
      // console.log('myScrollTop' + '::>>', myScrollTop)
    }
    const toTop = () => {
      var myTop = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          myTop -=
            180
        if (myTop <= 0) clearInterval(timeTop)
      }, 10)
    }
    const getMoreCakes = () => {
      router.push({
        path: '/cakes',
      })
      document.documentElement.scrollTop = 0
    }
    const watchVideo = () => {
      const videoDom = document.querySelector('#video') as HTMLVideoElement
        observerHandle([videoDom], () => {
          videoDom.play()
          // videoDom.requestPictureInPicture()
        }, () => {
          videoDom.pause()
          // document.exitPictureInPicture()
        })
    }
    onMounted(() => {
      window.addEventListener('scroll', handlerScroll, true)
      setTimeout(() => {
        // firstSwiperSwitch(0)
        watchVideo()
      }, 500)
    })

    return {
      showArrow,  playVideo, hideBox,
      ingredientList,  firstWipers, secondWipers,
      myCarousel,
      getMoreCakes,
      changeCurr, // 点击切换轮播图
      firstSwiperSwitch, // 第一列轮播图切换
      toTop, // 回到顶部
      transition:'test',
      currentDate,
      loading,
    }
  },
}
</script>

<style lang="scss" >
* {
  padding: 0;
  margin: 0;
}

#xmbz_index {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  .my_frame {
    position: fixed;
    bottom: 40;
    right: 10px;
    z-index: 999;
    background-color: transparent !important;
    border: 1px dashed #ccc;
    .closeBtn {
      position: absolute;
      top: 12px;
      right: 6px;
      width: 18px;
      height: 18px;
      cursor: pointer;
      z-index: 9;
    }
  }
  .applets_qrcode {
    position: fixed;
    bottom: 29%;
    right: 10px;
    width: 150px;
    height: 170px;
    border-radius: 2px;
    z-index: 999;
  }
  .back_top {
    position: fixed;
    right: 25px;
    bottom: 22.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #ddd;
    cursor: pointer;
    z-index: 999;
    animation: fade-in 0.5s linear forwards;
    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }
    .arrow_top {
      width: 24px;
      height: 24px;
      background: url('@/assets/images/arrow-up.png') no-repeat;
      background-position: center;
    }
  }
  .h2_title {
    font: 400 36px 'PingFang SC';
    line-height: 50px;
  }
  .h4_title {
    font: 400 30px 'SF Pro Display';
    letter-spacing: -0.01px;
    color: #c4c4c4;
  }
  .desc_p {
    font: 400 16px 'PingFang SC';
  }

  // 第一列轮播
  .swiper_first {
    height: 762px;
    width: 100%;
    .el-carousel--horizontal {
      height: 100%;
    }
    // current = 0
    .first_swiper_active_0 {
      width: 40px;
      height: 10px;
      border-radius: 50px;
      background-color: #409eff !important;
    }
    .first_swiper_not_active_0 {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #e1f3d8;
    }
    // current = 1
    .first_swiper_active_1 {
      width: 40px;
      height: 10px;
      border-radius: 50px;
      background-color: #67c23a;
    }
    .first_swiper_not_active_1 {
      width: 10px;
      height: 10px;
      border-radius: 50px;
      background-color: #e1f3d8;
    }
    // current = 2
    .first_swiper_active_2 {
      width: 40px;
      height: 10px;
      border-radius: 50px;
      background-color: #f56c6c;
    }
    .first_swiper_not_active_2 {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #fde2e2;
    }
    img {
      width: 100%;
      height: 762px;
      // object-fit: contain;
    }
  }
  // 引导箭头
  .arrow_down {
    width: 88px;
    height: 68px;
    margin: 5px auto 0;
    background: url('@/assets/images/arrow.gif') no-repeat;
    background-size: cover;
  }
  .hide_arrow {
    animation: hide-arrow 0.5s forwards;
    @keyframes hide-arrow {
      0% {
        opacity: 100;
      }
      100% {
        opacity: 0;
      }
    }
  }
  .hide_after {
    margin-top: 49px;
  }
  // 第二列轮播
  .swiper_second {
    width: 100%;
    height: 836px;
    .second_top {
      display: flex;
      justify-content: space-between;
      max-width: 65%;
      margin: 0 auto;
      // padding: 0 351px;
      .swiper_arrow {
        display: flex;
        align-items: center;
        width: 87px;
        .arrow_box {
          display: flex;
          align-items: center;
          margin-top: 50px;
        }
      }
      .second_swiper_li {
        height: 722px;
        flex: 1;
        .el-carousel__item {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .swiper_chart {
          width: 1002px;
          height: 549px;
        }
      }
      h3 {
        font: 400 19px 'Inter';
        margin-top: -10px;
      }
      .shape {
        font: 400 14px 'SF Pro Display';
        margin: 28px auto 32px;
      }
    }
    .second_bottom {
      display: flex;
      flex-direction: column-reverse;
      height: 341px;
      background-color: #f6f6f6;
      margin-top: -336px;
      padding-bottom: 32px;
      .get_more {
        width: 100px;
        height: 48px;
        line-height: 48px;
        color: #d61718;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        background: url('@/assets/images/get_more.png') no-repeat;
        background-size: contain;
        cursor: pointer;
        z-index: 9;
      }
    }
  }
  // 视频
  .service_video {
    .xmbz_video {
      border-radius: 6px;
      margin-top: 50px;
    }
  }
  // 精选食材
  .ingredients {
    margin: 72px 0;
    .foodstuff_list {
      width: 1220px;
      margin-top: 50px;
      li {
        position: relative;
        width: 280px;
        height: 280px;
        overflow: hidden;
        border-radius: 4px;
        img {
          cursor: pointer;
          transition: 0.6s;
        }
        img:hover {
          transform: scale(2);
        }
        .pic_info {
          position: absolute;
          bottom: 12px;
          right: 15px;
          width: 250px;
          height: 59px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 4px;
          h4 {
            font: 400 20px 'Microsoft YaHei';
            color: #602c17;
          }
          p {
            font: 400 20px 'Microsoft YaHei';
            font-size: 14px;
            color: #4c4c4c;
          }
        }
      }
    }
  }
  // 研发团队
  .dev_team {
    .reuse_top {
      margin-bottom: 72px;
    }
    .team_pic {
      .chef_pic {
        width: 50%;
      }
      .dev_right {
        text-align: right;
        .our_chef {
          font: 300 50px 'PingFang SC';
        }
        p {
          font: 400 16px 'PingFang SC';
          line-height: 30px !important;
        }
      }
    }
  }
  // 合作客户
  .shared_customer {
    width: 100%;
    height: 676px;
    background-color: #f6f6f6;
    padding: 72px 0 75px;
    .reuse_top {
      height: 114px;
      margin-bottom: 50px;
    }
    .shared_bottom {
      width: 100%;
      height: 416px;
      overflow: hidden;
      // 滚动动画
      .loop_play {
        position: relative;
        width: 100%;
        height: 373px;
        background-image: url('@/assets/images/loop-bg.png');
        // background-image: url('@/assets/images/shared_customer.png');
        background-size: contain;
        animation: likes 60s linear infinite forwards;
      }
      .loop_play::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 350px;
        height: 416px;
        background: linear-gradient(
          90deg,
          #f6f6f6 56.29%,
          rgba(246, 246, 246, 0.5) 81.25%,
          rgba(246, 246, 246, 0) 99.83%
        );
        z-index: 9;
      }
      .loop_play::after {
        position: absolute;
        top: 0;
        right: 0;
        content: '';
        width: 350px;
        height: 416px;
        background: linear-gradient(
          270deg,
          #f6f6f6 56.29%,
          rgba(246, 246, 246, 0.5) 81.25%,
          rgba(246, 246, 246, 0) 99.83%
        );
        z-index: 9;
      }
      @keyframes likes {
        to {
          background-position: -1920 * 3px 0;
        }
      }
    }
  }
  // 代理咨询
  .acting {
    width: 1220px;
    height: 880px;
    margin: 0 auto;
    padding-bottom: 70px;
    .reuse_top {
      flex: 1;
    }
    .form {
      width: 100%;
      height: 525px;
      & > div {
        margin-bottom: 30px;
      }
      .box_input {
        .label {
          font: 400 14px 'PingFang SC';
          color: #4c4c4c;
          margin: 0 0 10px 6px;
        }
        ._input {
          display: inline-block;
          width: 1220px;
          height: 50px !important;
          color: #000;
          font: 400 16px 'PingFang SC';
          text-indent: 19px;
          background-color: #f1f1f1;
          border: 1px solid #c4c4c4;
        }
        .sort_input {
          width: 598px;
        }
        input::placeholder {
          color: #c4c4c4;
        }
      }
    }
  }
}
</style>
